<template>
  <page-header-wrapper :title="false">
    <a-card title="资源列表">
      <div class="table-page-search-wrapper">
        <a-form-model
          layout="inline"
          :model="queryParam"
        >
          <a-row :gutter="15">
            <a-col :md="6" :sm="24">
              <a-form-model-item label="联系电话">
                <a-input v-model="queryParam['filter[phone]']"/>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="业务名称">
                <a-input v-model="queryParam['filter[b_name]']"/>
              </a-form-model-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="6" :sm="24">
                <a-form-item label="入库时间">
                  <a-range-picker @change="onTime1" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="领取时间">
                  <a-range-picker @change="onTime2" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="业务分类">
                  <a-select v-model="queryParam['filter[first_type]']" :default-value="0">
                    <a-select-option v-for="(item,index) in firstTypeOpts" :key="index" :value="index">
                      {{item}}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="搜索引擎">
                  <a-input v-model="queryParam['filter[search_engine]']"/>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="首次页面">
                  <a-input v-model="queryParam['filter[first_url]']"/>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="领取状态">
                  <a-select v-model="queryParam['filter[receive_status]']" :default-value="0">
                    <a-select-option v-for="item in receiveStatusOpts" :key="item.id" :value="item.id">
                      {{item.title}}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="按搜索词">
                  <a-input v-model="queryParam['filter[search_keywords]']"/>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="领取顾问">
                  <a-input v-model="queryParam['filter[receiver_info]']"/>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="搜索的IP">
                  <a-input v-model="queryParam['filter[ip]']"/>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="放弃状态">
                  <a-select v-model="queryParam['filter[is_abandon]']" :default-value="0">
                    <a-select-option v-for="(item,index) in abandonStatusOpts" :key="index" :value="index">
                      {{item}}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="客户状态">
                  <a-select v-model="queryParam['filter[customer_status]']" :default-value="0">
                    <a-select-option v-for="item in customerStatusOpts" :key="item.id" :value="item.id">
                      {{item.title}}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
                <span class='table-page-search-submitButtons' :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                  <a-button type="primary" @click="$refs.table.refresh(true)">搜索</a-button>
                  <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
                  <a @click="toggleAdvanced" style="margin-left: 8px">
                    {{ advanced ? '收起' : '展开' }}
                    <a-icon :type="advanced ? 'up' : 'down'" />
                  </a>
                </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <a-button :disabled="selectedRowKeys.length == 0" type="danger" @click="onDelete(selectedRowKeys)">批量删除</a-button>
      <a-button style="margin-left: 8px" :disabled="selectedRowKeys.length == 0" type="danger" @click="batchTransfer(selectedRowKeys)">批量转移</a-button>
      <a-button style="margin-left: 8px" type='primary' @click='exportData'>导出</a-button>
      <p></p>
      <s-table
        bordered
        ref="table"
        :row-key="(record) => record.customer_id"
        :columns="customerColumns"
        :row-selection="rowSelection"
        :data="customerData"
      >
        <template slot='ip' slot-scope='text,record'>
          {{record.device}}<br>{{text}}<br>{{record.ip_format}}
        </template>
        <template slot="search_keywords" slot-scope="text,record">
          <a-button size="small" type="link" icon="edit" @click="onEdit(record.customer_id)">{{text}}</a-button>
          <div>{{record.search_engine}}</div>
        </template>
        <template slot='first_url' slot-scope='text'>
          <a :href='text' target='_blank'>{{text}}</a>
        </template>
        <template slot='action' slot-scope='text,record'>
          <a-button type='primary' size='small' style="margin-right:5px" :disabled="record.transfer == 0" @click="onTransfer(record.customer_id)">转移</a-button>
          <a-button type='danger' size='small' @click="onDelete(record.customer_id)">删除</a-button>
        </template>
      </s-table>
    </a-card>
    <a-modal
      title="指派数据"
      v-model="visible"
      :width="500"
      :confirm-loading="loading"
      @ok="onSubmitTransfer"
    >
      <a-alert
        message="警告"
        description="所转移的信息将直接进入目标库"
        type="warning"
        show-icon
      />
      <p></p>
      <a-select
        show-search
        v-model="transferForm['transfer[to_company]']"
        :filter-option="filterOption"
        style="width: 100%"
        placeholder="请选择要转移的公司"
      >
        <a-select-option v-for="(item,index) in companyOpts" :key="index" :value="index">{{item}}</a-select-option>
      </a-select>
    </a-modal>
    <a-modal
      title="更改客户状态"
      v-model="statusVisible"
      :width="300"
      @ok="onSubmit"
    >
      <a-form-model
        ref="statusForm"
        :model="statusForm"
      >
        <a-form-model-item label="选择客户状态">
          <a-select v-model="statusForm.customer_status" placeholder="请选择客户状态">
            <a-select-option v-for="item in statusOpts" :key="item.id" :value="item.id">{{item.title}}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      title="修改搜索词"
      v-model="visible2"
      :width="400"
      @ok="onSubmitKeyword"
    >
      <a-form-model
        ref="keywordForm"
        :model="keywordForm"
        :rules="keywordRules"
      >
        <a-form-model-item prop="search_keywords">
          <a-input v-model="keywordForm.search_keywords" type="text" placeholder="请输入要修改的关键词"></a-input>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import storage from 'store'
  import { COMPANY, ACCESS_TOKEN } from '@/store/mutation-types'
  import { STable } from '@/components'
  import col from '@/columns/customer'
  import apis from '@/api'
  import {
    allList,
    delList,
    getEdit,
    getEditSearch,
    getTransfer,
    postEdit,
    postEditSearch,
    postTransfer
  } from '@/api/customer'
  export default {
    components: {
      STable
    },
    name: 'CustomerList2',
    data () {
      return {
        customerColumns: col.all_list4,
        customerData: parameters => {
          return allList(Object.assign(parameters, this.queryParam)).then(res => {
            this.customerStatusOpts = res.result.customer_status_opts
            this.abandonStatusOpts = res.result.is_abandon_opts
            this.receiveStatusOpts = res.result.receive_status_opts
            this.firstTypeOpts = res.result.first_type_opts
            return res.result
          })
        },
        queryParam: {},
        loading: false,
        advanced: true,
        customerStatusOpts: {},
        abandonStatusOpts: {},
        receiveStatusOpts: {},
        firstTypeOpts: {},
        selectedRowKeys: [],
        exportUrl: apis.ExportData,
        exportParams: '',
        company: storage.get(COMPANY),
        acesstoken: storage.get(ACCESS_TOKEN),
        transferForm: {},
        ids: [],
        visible: false,
        statusVisible: false,
        companyOpts: {},
        statusForm: {},
        statusOpts: {},
        keywordForm: {},
        keywordRules: {
          search_keywords: []
        },
        visible2: false
      }
    },
    methods: {
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      onTime1 (date, dateString) {
        this.queryParam['filter[created_at_start]'] = dateString[0]
        this.queryParam['filter[created_at_end]'] = dateString[1]
      },
      onTime2 (date, dateString) {
        this.queryParam['filter[received_at_start]'] = dateString[0]
        this.queryParam['filter[received_at_end]'] = dateString[1]
      },
      onSelectChange (selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      onDelete (ids) {
        const app = this
        app.$confirm({
          title: '确定删除数据吗',
          onOk: () => {
            const parameter = {}
            parameter['ids'] = ids
            delList(parameter).then(res => {
              if (res.status === 0) {
                app.$refs.table.refresh(true)
              } else {
                this.$warning({
                  title: res.msg
                })
              }
            })
          }
        })
      },
      onSubmit () {
        const app = this
        postEdit(app.statusForm.id, app.statusForm).then(res => {
          if (res.status === 0) {
            app.statusVisible = false
            app.$refs.table.refresh()
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      getStatus (id) {
        const app = this
        app.statusForm = {}
        app.statusForm['id'] = id
        getEdit(id).then(res => {
          if (res.status === 0) {
            app.statusOpts = res.result.customer_status_opts
            app.statusVisible = true
          }
        })
      },
      resetForm () {
        // this.reload()
        const app = this
        app.queryParam = {}
        app.$refs.table.refresh(true)
      },
      exportData () {
        const app = this
        for (const k in app.queryParam) {
          app.exportParams = app.exportParams + ('&' + k + '=' + app.queryParam[k])
        }
        app.exportUrl = app.exportUrl + '?access_token=' + app.acesstoken + '&company=' + app.company + app.exportParams
        app.$confirm({
          title: '是否导出所筛选的数据',
          onOk: () => {
            window.open(process.env.VUE_APP_API_BASE_URL + app.exportUrl)
          }
        })
      },
      batchTransfer (ids) {
        const app = this
        app.ids = ids
        getTransfer().then(res => {
          if (res.status === 0) {
            app.companyOpts = res.result.companies
            app.visible = true
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      onTransfer (id) {
        const app = this
        this.ids[0] = id
        getTransfer().then(res => {
          if (res.status === 0) {
            app.companyOpts = res.result.companies
            app.visible = true
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      onSubmitTransfer () {
        const app = this
        app.transferForm['transfer[customer_ids]'] = app.ids
        postTransfer(app.transferForm).then(res => {
          if (res.status === 0) {
            app.visible = false
            app.$refs.table.refresh(true)
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      onEdit (id) {
        const app = this
        app.keywordForm['customer_id'] = id
        getEditSearch(id).then(res => {
          app.keywordForm['search_keywords'] = res.result.search_keywords
          app.visible2 = true
        })
      },
      onSubmitKeyword () {
        const app = this
        app.$refs.keywordForm.validate(valid => {
          if (valid) {
            postEditSearch(app.keywordForm['customer_id'], app.keywordForm).then(res => {
              if (res.status === 0) {
                app.$refs.table.refresh()
                app.visible2 = false
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          } else {
            return false
          }
        })
      }
    },
    computed: {
      rowSelection () {
        return {
          onChange: this.onSelectChange,
          getCheckboxProps: record => ({
            props: {
              disabled: record.transfer === 0, // Column configuration not to be checked
              name: record.name
            }
          })
        }
      }
    }
  }
</script>

<style scoped>

</style>
